<template>
  <div id="heard">
    <!-- <div>父组件传过来的值【toChildrenData】：{{toChildrenData}}</div> -->
    <div style="height: 640px" ref="myChart" id="mychart"></div>
    <div ref="myChart1" id="mychart1"></div>
  </div>
</template>
<script>
import echartsapi from "@/api/report";
import html2canvas from "html2canvas";
import ExcelJS from "exceljs"; // 引入exceljs, 用于生成excel文件
import { saveAs } from "file-saver";
import * as echarts from "echarts";
export default {
  props: {
    // formaldata: {
    //   type: Array,
    //   default: [],
    // },
    // informaldata: {
    //   type: Array,
    //   default: [],
    // },
    year: String,
    problemAttribution: String,
    formalComplaintType: String,
    informalComplaintType: String,
  },
  name: "myChart",
  data() {
    return {
      option: {
        title: {
          text: "正式投诉",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["实绩", "目标"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true, // 显示坐标轴线
          },
        },
        series: [],
      },
      option1: {
        title: {
          text: "非正式投诉",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["实绩", "目标"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true, // 不显示坐标轴线
          },
        },
        series: [],
      },
    };
  },
  created() {
    // this.formalinit();
    // this.informalinit();
  },
  mounted() {
    this.initecharts();
    this.initecharts1();
    //this.init();
    //1.echarts的init方法
    // let myEcharts = echarts.init(this.$refs.myChart);
    // let myEcharts1 = echarts.init(this.$refs.myChart1);
    // 2.设置数据
    // let xdata = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    // let data = [150, 230, 224, 218, 135, 147, 260];
    // 3.配置项,从echarts网站复制，
    // 4.设置配置项
    // myEcharts.setOption(option);
    // myEcharts1.setOption(option1);
  },
  methods: {
    exportecharts() {
      //导出单个echarts
      // const myChart = echarts.init(this.$refs.myChart)
      //  // 获取图表的Base64 URL
      // const base64URL = myChart.getDataURL({
      //   type: 'png',
      //   pixelRatio: 2,
      //   backgroundColor: '#fff'
      // });

      // // 创建一个a标签用于下载
      // const link = document.createElement('a');
      // link.style.display = 'none';
      // link.href = base64URL;
      // link.download = 'echarts.png'; // 设置下载文件的名称
      // document.body.appendChild(link);
      // link.click();
      // // 移除a标签
      // document.body.removeChild(link);
      //导出图片
      //  html2canvas(document.getElementById("heard")).then(function (canvas) {
      //   var img = canvas
      //     .toDataURL("image/png")
      //     .replace("image/png", "image/octet-stream");
      //     // 创建a标签，实现下载
      //   var creatIMg = document.createElement("a");
      //   creatIMg.download = "配件客诉报表.png"; // 设置下载的文件名，
      //   creatIMg.href = img; // 下载url
      //   document.body.appendChild(creatIMg);
      //   creatIMg.click();
      //   creatIMg.remove(); // 下载之后把创建的元素删除
      // })
      //导出到excel
      const workbook = new ExcelJS.Workbook(); // 创建工作簿
      const worksheet = workbook.addWorksheet("Sheet1"); // 添加工作表
      html2canvas(document.getElementById("heard")).then(function (canvas) {
        var base64Image = canvas.toDataURL("image/png");
        let image = workbook.addImage({
          // 添加图片
          base64: base64Image, // 图片的base64编码
          extension: "png", // 图片的扩展名
        });

        worksheet.addImage(image, "A1:AE60"); // 将图片添加到工作表中
        workbook.xlsx.writeBuffer().then(function (buffer) {
          // 生成excel文件的二进制数据
          saveAs.saveAs(
            new Blob([buffer], {
              // 生成Blob对象
              type: "application/octet-stream", // 指定文件的MIME类型
            }),
            "配件客诉报表.xlsx"
          ); // 指定文件名
        });
      });
    },
    initecharts(year, problemAttribution, formalComplaintType) {
      var year = this.year;
      var problemAttribution = this.problemAttribution;
      var formalComplaintType = this.formalComplaintType;
      echartsapi
        .getEcharts(year, problemAttribution, formalComplaintType)
        .then((res) => {
          console.log("123");
          console.log(res);
          this.option.series = res;
          console.log(this.option.series);
          let myEcharts = echarts.init(this.$refs.myChart);

          myEcharts.setOption(this.option);
        })
        .catch(() => {
          let myEcharts = echarts.init(this.$refs.myChart);
          myEcharts.setOption(this.option);
          myEcharts.clear();
          myEcharts.dispose();
        });
    },
    initecharts1(year, problemAttribution, informalComplaintType) {
      var year = this.year;
      var problemAttribution = this.problemAttribution;
      var informalComplaintType = this.informalComplaintType;
      echartsapi
        .getEcharts(year, problemAttribution, informalComplaintType)
        .then((res) => {
          this.option1.series = res;
          let myEcharts1 = echarts.init(this.$refs.myChart1);
          myEcharts1.setOption(this.option1);
        })
        .catch(() => {
          let myEcharts1 = echarts.init(this.$refs.myChart1);
          myEcharts1.setOption(this.option1);
          //myEcharts1.dispose();
          myEcharts1.clear();
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style>
#mychart {
  width: 50%;
  height: 60%;
  /* border: 1px solid red; */
}
#mychart1 {
  width: 50%;
  height: 80%;
  /* border: 1px solid red; */
}
#heard {
  padding-top: 15px;
  display: flex;
  height: 100%;
}
</style>
